<template>
  <q-page class="mechanismUrl-page text-white" style="">
    <section class="content" style="overflow: auto">
      <div v-if="!apiBList.length || !!orderInfo?.hasPushMsg" class="center q-pt-lg">
        <q-img
          src="~/assets/images/mechanismurl/image1.png"
          :ratio="172 / 123"
          no-spinner
          width="180px"
          no-transition
        />
      </div>
      <div
        v-if="!apiBList.length || !!orderInfo?.hasPushMsg"
        class="text-center"
        style="font-size: 20px; font-weight: 500; letter-spacing: 1px"
      >
        {{ orderInfo?.hasPushMsg ? '已为您成功匹配机构' : '暂无匹配机构' }}
      </div>
      <section v-if="!!orderInfo?.hasPushMsg">
        <div class="flex items-center justify-center q-mt-md">
          <q-icon name="straight" size="xs" style="color: #fff" />
          <div class="flex items-center" style="background-color: #fff; border-radius: 6px; padding: 4px 6px">
            <div class="center q-mr-xs" style="border-radius: 6px; overflow: hidden">
              <img
                v-if="orderInfo.pushProductInfo?.logo"
                :src="orderInfo.pushProductInfo!.logo"
                width="22"
                height="22"
                alt="logo"
              />
            </div>
            <div style="color: #548cfd">{{ orderInfo.pushProductInfo!.companyName }}</div>
          </div>
          <q-icon name="straight" size="xs" style="color: #fff" />
        </div>

        <div class="text-center q-mt-md" style="opacity: 0.63">将立即与您电话联系，请耐心等待电话</div>
      </section>

      <div class="list-box q-pa-sm" v-if="!!apiBList?.length">
        <div style="color: #333" class="font-bold">机构列表</div>
        <div class="list-content q-mt-sm">
          <div
            class="list-item q-pa-sm"
            v-for="(item, index) in apiBList"
            :key="index"
            :class="`bg${(index % 4) + 1}`"
          >
            <div class="flex items-center no-wrap">
              <div
                class="q-mr-xs"
                style="
                  width: 18px;
                  height: 18px;
                  border-radius: 99999px;
                  background-size: cover;
                  background-position: center;
                "
                :style="{ backgroundImage: `url(${item.companyLogo})` }"
              ></div>
              <div
                class="flex-1 hide-scrollbar text-black"
                style="width: 50px; overflow-x: auto; white-space: nowrap"
              >
                {{ item.companyName }}
              </div>
            </div>
            <div style="color: #999999; font-size: 12px" class="q-mt-sm">最高可借(元)</div>
            <div style="color: #222; font-size: 24px; font-weight: bold">
              {{ (+item.maxLoanAmount).toLocaleString() }}
            </div>
            <div style="color: #999999; font-size: 12px" class="q-mt-xs">年利率(单利)</div>
            <div class="font-DINAlternate" style="color: #ff1e4a; font-size: 15px; font-weight: bold">
              {{ +(+item.minRate).toFixed(2) }}%~{{ +(+item.maxRate).toFixed(2) }}%
            </div>

            <div class="q-mt-sm q-px-sm">
              <q-btn
                color="primary"
                padding="xs md"
                unelevated
                class="full-width"
                rounded
                style=""
                @click="submit(item)"
                label="去申请"
              />
            </div>
          </div>
        </div>
      </div>
    </section>
  </q-page>
</template>

<script setup lang="ts">
import { successOrderApi } from 'src/api/app';
import { pushAPIBApi } from 'src/api/member';
import { getApiBOrderItemClickApi, getApiBOrderListApi, handleApiBMatchApi } from 'src/api/merchant';
import logoPng from 'src/assets/images/public/logo.png';
import { APIBItem } from 'src/types/apib';
import { showLoadingToast } from 'vant';
import { ref } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();
const token = route.query.token as string;

type SuccessOrderRes = {
  hasPushMsg: number;
  pushProductInfo?: PushProductInfo;
};

type PushProductInfo = {
  productId: number;
  companyName: string;
  successTime: string;
  logo: string;
  productName: string;
  protocolList: ProtocolItem[];
};

type ProtocolItem = {
  protocolName: string;
  protocolUrl: string;
};



const orderInfo = ref<SuccessOrderRes>();
const apiBList = ref<APIBItem[]>([]);

const initData = async () => {
  const toast = showLoadingToast({
    message: '加载中...',
    forbidClick: true,
    duration: 0,
  });
  try {
    // successOrderApi<SuccessOrderRes>({ token }).then((res) => {
    //     orderInfo.value = res.data;
    //   })
    // const matchRes = await handleApiBMatchApi({ token });
    // const apilist = await pushAPIBApi<{ dataList: APIBItem[] }>({ token });

    const res = await getApiBOrderListApi<{ dataList: APIBItem[] }>({ token })
    apiBList.value = res.data?.dataList ?? [];
  } catch (error) {
    console.error(error);
  }
  toast.close();
};

initData();

const refresh = async (done: () => void) => {
  await initData().finally(() => done());
};

const submit = async (item: APIBItem) => {
  const { infoId, orderItemId } = item;
  await getApiBOrderItemClickApi({ token, infoId, orderItemId });
  location.href = item.approveUrl;
};
</script>

<style lang="scss" scoped>
.mechanismUrl-page {
  position: relative;
  background-color: #f4f6f9;
  z-index: 1;
  &::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    $height: 400px;
    height: $height;
    width: 100%;
    background-color: #2c70fc;
    clip-path: ellipse(($height * 1.2) $height at 50% 0%);
  }
  .content {
    position: relative;
    z-index: 2;
  }
}

.list-box {
  background: linear-gradient(180deg, #b1caff 0%, #ffffff 200px);
  background-color: #fff;
  border-radius: 12px;
  border: 1px solid #ffffff;
  margin: 16px 10px;
}
.list-content {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: row;
  gap: 8px;
}
.list-item {
  border: 1px solid #ffffff;
  border-radius: 8px;
  &.bg1 {
    background-color: #fdf9f1;
  }
  &.bg2 {
    background-color: #fff7f8;
  }
  &.bg3 {
    background-color: #ecf7fc;
  }
  &.bg4 {
    background-color: #eefdf6;
  }
}
</style>
